通过 WordPress 多媒体上传组件保存图片 – WordPress大学

文本是《WordPress 媒体文件上传开发入门（共3篇）》专题的第 3 篇。阅读本文前，建议先阅读前面的文章：

在这个系列中，我们一起来看看在插件中执行WordPress的多媒体上传。这一系列及其相关的代码背后的想法，是让我们更清晰地了解它如何工作，如何使用它，以及如何将它纳入到我们的项目中。

关于这个，我们已经发布了以下文章：

而且，通过这些文章，我们完成了创造一个插件的过程，使用WordPress多媒体上传组件在我们博客的文章（页面）的页角上加入特色图片。

但还有一个问题：显示在相关文章（页面）的这个图片没有被保存。

在这篇文章中，我们将会介绍之前剩下的内容并且完成插件的剩余部分。请注意，我假设你已经阅读了之前的两篇文章并且理解了我们给出的对应功能的代码。

既然如此，让我们继续吧。

文章目录

能够在 WordPress 前端页面中显示图片的关键在于是否把根据提供的信息保存下来。

在之前的文章中，我们使用了一些信息在我们创建 MetaBox 显示，但是这些信息都没有被真正地保存下来。因此，这些图片

我们会修正这个问题。尤其是，准备保存下面的信息：

我们需要做的第一件事情是使用三个 input 框作为容器添加到在插件的显示页面 admin.php 中。

让我们看一下下面的代码：

从一开始，就应该很容易理解：

写的这里，我们需要返回到之前的 JavaScript 文件中，这样就可以获取到通过多媒体上传组件和 input 框中的信息。

打开 admin.js 然后在处理函数（用于注册 file_frame 事件）的后面添加下面三行代码。

从现在开始，打开你的 WordPress 的仪表盘，添加或者编辑一篇已经存在的文章，你应该就能看到类似下面图片的效果了：

假设你已经直接把所有的 JavaScript 都写完了，那么当你通过多媒体上传组件选择了图片之后，就应该能看到一些内容了。

然而，当你点击”移除特色图片“后文本还在。

尽管还有其他方法可以实现，我这里给出下面的一种：

记住这些代码要写在“移除特色图片”事件的处理函数中。在之前的文章中，我们定义了  resetUploadForm 这个函数。

写到这里，你应该能够点击“移除特色图片”并且看到图片和input框被重置了。如果遇到问题的话，请查看关联在本文的 GitHub 库中的源代码（应该是在分支中，版本号额为1.0.0）。

现在我们需要再往插件中添加一些代码，把和文章关联的input框的值过滤后保存到数据库中，这样我们就可以在每篇文章的底部显示这些信息了。

在函数 Acme_Footer_Image 中，添加下面的代码：

然后，我们需要定一个将 input 框内的值保存到数据库的函数。关于下面的代码有两件事情需要了解：

准备测试，在前端页面中显示之前，对于仪表盘我们需要做两个改变。

首先，我们需要把元数据回显到 input 框中。写到文件 admin.php 中，并且把下面的包含进去然后更新：